<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.3.7-dist/js/jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <style>
        .layout {
            width: 375px;
            height: 667px;
            margin: 50px auto;
            border: solid gray 0px;
        }
        img {
            position: relative;
            left: -21%;
            top: -20%;
        }
        button[type='submit'] {
            position: relative;
            left: -3%;
        }
        td,a{
            text-align: center;
        }
        .apply {
            margin: auto 50px;
        }
        button {
            margin: auto 35%;
        }
        .time {
            background-color: coral;
            line-height: 40px;
            height: 40px;
            width: 100%;
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="layout">
    <div class="time">剩余支付时间 <span class="joinm">15</span>分<span class="joins">25</span>秒</div>
    <div class="row">
        <div class="col-xs-6 col-md-12">
            <a href="#" class="thumbnail">
                <p>支付金额（元）</p>
                <h1>3.00</h1>
            </a>
        </div>
    </div>
    <div class="table-responsive">
    <table class="table table-hover table-bordered" id="menzheng">
<!--        <tr>-->
<!--            <td class="info">费用类型</td>-->
<!--            <td class="info">当班挂号</td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--            <td>就诊科室</td>-->
<!--            <td>妇科门诊</td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--            <td>医生名称</td>-->
<!--            <td>谢晓峰</td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--            <td>就诊日期</td>-->
<!--            <td>2019-10-31</td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--            <td>就诊时段</td>-->
<!--            <td>下午</td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--            <td>就诊人</td>-->
<!--            <td>谢晓峰</td>-->
<!--        </tr>-->
    </table>
        <div class="checkbox">
            <label class="apply">
                <input type="checkbox" value="">
                同意协议 <a href="">《医疗在线挂号支付协议》</a>
            </label>
            <br><br><br><br>
            <button type="button" class="btn btn-default btn-lg">确认支付</button>
        </div>
</div>
</div>

<!--倒计时-->
<script type="text/javascript">

    $("button[type='button']").on("click",function () {
        window.location.href="paysuccess.html"
    })

    var setTimer = null;
    var chazhi = 0;
    //差值计算
    //例子(模拟)
    chazhi = 135 * 86400000;
    //真实时间(注意月份需减掉1，否则时间会计算错误)
    //chazhi = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数
    //chazhi = (new Date(2018,8-1,6,6,6,6)) - (new Date());

    //执行函数部分
    countFunc(chazhi);
    setTimer = setInterval(function() {
        chazhi = chazhi - 1000;
        countFunc(chazhi);
    }, 1000);
    function countFunc(leftTime) {
        if(leftTime >= 0) {
            var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
            var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
            var minutes = parseInt(leftTime / 1000 / 60 % 60, 10); //计算剩余的分钟
            var seconds = parseInt(leftTime / 1000 % 60, 10); //计算剩余的秒数
            days = checkTime(days);
            hours = checkTime(hours);
            minutes = checkTime(minutes);
            seconds = checkTime(seconds);
            $(".joind").html(days);
            $(".joinh").html(hours);
            $(".joinm").html(minutes);
            $(".joins").html(seconds);
        } else {
            clearInterval(setTimer);
            $(".joind").html("00");
            $(".joinh").html("00");
            $(".joinm").html("00");
            $(".joins").html("00");
        }
    }
    function checkTime(i) { //将0-9的数字前面加上0，例1变为01
        if(i < 10) {
            i = "0" + i;
        }
        return i;
    }


    $.ajax({
        url:"/patientinformation/getxinxi",
        type:"get",
        dataType:"json",
        success: function (data) {

            for(var i in data){
                $("#menzheng").append("<tr ><td class='info'>费用类型</td><td class='info'>当班挂号</td></tr>" +
                    "<tr><td>就诊科室</td><td>"+data[i].deptype+"</td></tr><tr><td>医生名称</td><td>"+data[i].staname+"</td></tr>" +
                    "<tr><td>就诊日期</td><td>"+data[i].patrdate+"</td></tr><tr><td>就诊时段</td><td>下午</td></tr>" +
                    "<tr><td>就诊人</td><td>"+data[i].pname+"</td></tr>")
            }

        }
    });









</script>
</body>
</html>